<template>
  <view class="message-page">
    <tm-tabs v-model="tabActive" :list="tabData" class="mx-n10" @change="onTabChange"></tm-tabs>
    <view class="message-page-container my-n5">
      <view class="data-scroll-view">
        <tm-row
          v-for="(item, index) in listData"
          :key="index"
          :wrap="false"
          class="py-n10 mx-n10 border-b-1"
          @click="onItemClick(item)"
        >
          <tm-image
            :preview="true"
            :src="item.avatar"
            :width="104"
            :height="104"
            round="100"
            class="flex-shrink"
          ></tm-image>
          <tm-sheet padding="0" :margin="['20', 0]" class="flex-1 overflow">
            <tm-text color="#000001" fontSize="32">{{ item.nickname }}</tm-text>
            <tm-text color="#959eb0" fontSize="28" class="text-overflow">{{
              item.content
            }}</tm-text>
          </tm-sheet>
          <tm-text class="flex-shrink" color="#959eb0" fontSize="24">{{ item.times }}</tm-text>
        </tm-row>
      </view>
      <!-- <scroll-view class="data-scroll-view">
      </scroll-view> -->
    </view>
  </view>
</template>
<script lang="ts" setup>
  import { RES_DATA } from './MOCK';
  import { translate } from '@/locale';
  const tabData = ref([translate('pages.message.tab.chat'), translate('pages.message.tab.system')]);
  const listData = ref([]);
  const tabActive = ref(0);
  const getList = () => {
    listData.value = RES_DATA;
  };

  const onTabChange = () => {
    console.log('tabActive', tabActive.value);
  };

  const onItemClick = () => {
    uni.navigateTo({
      url: '/pages/liveChat/index',
    });
  };

  onMounted(() => {
    getList();
  });
</script>
<style lang="scss" scoped>
  uni-page-body {
    height: 100%;
  }
</style>
<style lang="scss">
  page {
    background-color: #fff;
  }
  .message-page {
    height: 100%;
    display: flex;
    flex-flow: column;
    .message-page-container {
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-flow: column;
      .data-scroll-view {
        flex: 1;
        // height: 1px;
        overflow: auto;
      }
    }
  }
</style>
